<template>
  <div
    class="room-content"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '44px' }"
  >
    <Search
      style="padding-top:0.1rem"
      ref="topSearch"
      class="search"
      :placeholder="placeholder"
      :isAdd="false"
      :isScreen="false"
      :isType="true"
      @onSearch="onSearch"
    ></Search>

    <div class="outBox" v-show="usedOutBox">
      <div class="capitalflow-topl" @click.stop='clickClassification("wareHouseId")'>
        <span>{{ wareHouseName ? wareHouseName : '仓库'}}</span>
        <van-icon name="arrow-down"/>
      </div>
      <div class="capitalflow-topl" @click.stop='clickClassification("areaId")'>
        <span>{{ areaName ? areaName :'库区'}}</span>
        <van-icon name="arrow-down" />
      </div>
    </div>
    <!--分页列表 -->
    <div
      class="listBox"
      :style="{
        height: checkedShow ?  (usedOutBox ? 'calc(100vh - 5rem)' : 'calc(100vh - 4rem)')  : (usedOutBox ? 'calc(100vh - 3.5rem)' : 'calc(100vh - 2.5rem)'),
      }"
    >
      <pageListak
        @getCheckedValue="getCheckedValue"
        ref="pageListak"
        :singelInfo="true"
        :columns="columns"
        :listUrl="listUrl"
        :minLen="5"
        @handleList="handleList"
        operationTxt="确定"
        :checkedShow="checkedShow"
        checkedShowText="全选"
        :usedGetMethods="usedMethods"
      />
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        :columns="categoryList"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        show-toolbar
      />
    </van-popup>
  </div>
</template>

<script>
import Search from "@/components/search";
import pageListak from "@/components/pageList/pageListAk";
import {
  getWarehouseList,
  getWarehouseAreaList
} from "@/api/inventoryOrder";

export default {
  components: { pageListak, Search },
  props: {
    listUrl: {
      //列表接口
      type: String,
      default: "wmslattice/getLatticeNotification",
    },
    columns: {
      type: Object,
      default: () => {
        return {};
      },
    },
    selectedGoods: {
      type: Array,
      default: () => {
        return [];
      },
    },
    checkedShow: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    usedMethods: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    usedOutBox: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    placeholder: {
      type: String,
      default: "库位编号|库位名称",
    },
    idkey :{
      type: String,
      default: "latticeId",
    },
    idkeyAno :{
      type: String,
      default: "",
    },
  },
  data() {
    return {
      keyword: "",
      filterForm: {},
      appTitle: "",
      categoryList: [],
      dropdownObj: {},
      activeIndex: 1,
      showPicker: false,
      wareHouseName: '',
      areaName: ''
    };
  },
  created() {},
  mounted() {
    let searchObj = {
      keyword: this.keyword,
    };
    this.searchQuery(searchObj);
  },
  methods: {
    onConfirm(v) {
      if(this.recSearchKey == 'wareHouseId') {
        this.wareHouseName = v.text
        this.areaName= ''
        this.dropdownObj['areaId'] = ''
      }else {
        this.areaName = v.text
      }
      this.dropdownObj[this.recSearchKey] = v.value

      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);

      this.showPicker = false;
    },
    clickClassification(key) {
      this.recSearchKey = key
      if (key == 'wareHouseId') {
        getWarehouseList().then((res) => {
          if (res.code == 200 && res.result) {
            this.categoryList = this.formMateList(res.result);
          } else {
            this.$toast(res.message);
          }
        });
      } else {
        if(!this.dropdownObj['wareHouseId'] || this.dropdownObj['wareHouseId'] == '') {
          return
        }

        getWarehouseAreaList({warehouseId: this.dropdownObj['wareHouseId']}).then((res) => {
          if (res.code == 200 && res.result) {
            this.categoryList = this.formMateList(res.result);
          } else {
            this.$toast(res.message);
          }
        });
      }

      this.showPicker = true;
    },
    formMateList(list) {
      let subList = []
      if(list.length != 0) {
        subList = list.map((ele) => {
          return {
            text: ele.name || ele.areaName,
            value: ele.id
          }
        })
      }
      return subList
    },

    // 获取选择的列表数据
    getCheckedValue(ids, selectArr) {
      if (selectArr.length > 0) {
        this.$emit("getCheckedValue", selectArr);
      } else {
        this.$toast("请先选择数据");
      }
    },
    handleList(id, item, text) {
      this.$emit("handleList", id, item, text);
    },
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
      };
      let subList = [];
      if (this.checkedShow) {
        subList = this.selectedGoods;
      } else {
        subList = [];
      }
      this.$refs.pageListak.searchQuery(params, subList, this.idkey, this.idkeyAno);
    },
  },
};
</script>
<style lang="less" scoped>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.capitalflow-topl {
  width: 50%;
  .flex(center, center);
  span {
    display: block;
    position: relative;
    font-size: 30px;
    color: #191f25;
  }
  span::after {
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -5px;
    border: 3px solid;
    border-color: transparent transparent #dcdee0 #dcdee0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
  }
}
.outBox {
  display: flex;
  background-color: #fff !important;
  padding: 20px 0;
}
.room-content {
  height: calc(100vh - 0);
  width: 100%;
  overflow-y: scroll;
  position: fixed;
  background: #f5f5f5;
  z-index: 999;
  .serach {
    height: 66px;
    background: #f2f2f6;
    border-radius: 0;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 66px;
    padding: 20px 24px;
    // border: 1px solid red;
    .placeh {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 46px;
    }
    .icon {
      width: 30px;
      height: 32px;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 32px 0.32px 32px;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 4px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 46px;
        margin-right: 32px;
        text-align: center;
        padding: 8px 56px;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.listBox {
  overflow-y: auto;
}
.dialogContentBox {
  text-align: left;
  margin: 20px 38px;
  color: #191f25;
  font-size: 32px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}
</style>
